<template >
  <div class="app">
    <div>
      <video_Head :title="title"/>
    </div>
    <div>
      <Video_Head_Control_Back @clientIdAndPlayDate="getClientId"/>
    </div>
    <div class="content">
      <div class="up">
        <dv-border-box-8 class="left"  :color="['#18213e','#18213e']">
          <backTimeMap :clientId="clientId" :time="time" v-if="fag"> </backTimeMap>
        </dv-border-box-8>
        <dv-border-box-8 class="right"  :color="['#18213e','#18213e']">  
          <RtvsBack  class="rtvsBack" :clientId="clientId" :time="time" :streamType="streamType"   v-if="fag" ></RtvsBack>
        </dv-border-box-8>
      </div>
      <div class="down">
        <div class="timeline">
          <div style="background-color: #545a5b;width: 100%;height: 2px;"></div>
          <Timeline :clientIdAndPlayDate="clientIdAndPlayDate"  @time="getTime" @PlayDate="getDate"/>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>

import Video_Head_Control_Back from "@/components/video/Video_Head_Control_Back"
import Timeline from "@/components/video/TimeLine";
import RtvsBack from "@/components/video/Rtvs_Back";
import backTimeMap from "@/components/video/Back_Time_Map"
import video_Head from "@/components/video/Video_head"
export default {
  props: {

  },

  components: {  Video_Head_Control_Back, RtvsBack, Timeline,backTimeMap,video_Head },
  data: function () {
    return {
      title:"rtvs回放视频",
      fag: false,
      content: '',
      clientId: "",
      list: [],
      channelNo: 1,
      mediaType: 1,
      realTime: 0,
      time:[],
      streamType:2,
      clientIdAndPlayDate:[]
    }
  },
  mounted() {
  },
  methods: {
    getClientId(val) {
      this.fag = false;
      this.clientId = val[0];
      this.clientIdAndPlayDate=val;
    },
    getTime(val){
      if (val!=null) {
        this.fag = false;
        this.time=val;
        this.streamType=this.time[2];
        this.fag = true;
      }
    },
    getDate(){
      this.fag = false;
    }
  }
}

</script>
<style scoped>
.app{
 
 height: 100vh;
 background-image: url("../../assets/img/pageBg.png");
}
/* 控制按钮 */
.content {
  width: 100%;
  height: 83vh;
}

.up {
  width: 100%;
  height: 69vh;

}

.down {
  width: 98%;
  margin-left: 1%;
  margin-top: 5px;
  height: 10vh;
}

.left {
  width: 52%;
  height: 69vh;
  background-color: rgb(17, 16, 16);
  margin-left: 1%;
  float: left;
}

.right {
  width: 45%;
  float: left;
  height: 69vh;
  margin-left: 1%;
  background-color: rgb(17, 16, 16);
}
.rtvsBack{
  margin-top: 10px;
  margin-left: 10px;
}


.timeline {
  width: 100%;
  height: 145px;
  background-color: #111010;
  color: white;
}

:deep(.el-input) {
  background-color: #10191b;
}

:deep(.el-input__wrapper) {
  background-color: #10191b;
}

:deep(.el-input__inner) {
  color: white;
}
</style>
  